<html>
<!--
Copyright 2013 Google Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<head>
  <title>MDV Benchmarks</title>
  <meta charset="utf-8">
  <script src="../mdv.js"></script>
  <script src="../node_modules/handlebars/dist/handlebars.js"></script>
  <script src="../third_party/ChangeSummary/benchmark/chartjs/Chart.js"></script>
  <script src="../third_party/ChangeSummary/benchmark/benchmark.js"></script>
  <script src="mdv_benchmark.js"></script>
  <style>
    * {
      font-family: arial, helvetica, sans-serif;
      font-weight: 400;
    }
    body {
      margin: 0;
      padding: 0;
      background-color: rgba(0, 0, 0, .1);
    }
  </style>
</head>
<body>
<h1>MDV Benchmarks</h1>

Width: <select id="widthSelect">
  <option selected>2
  <option>3
</select>

Depth: <select id="depthSelect">
  <option>2
  <option selected>4
  <option>8
</select>

Decoration: <select id="decorationSelect">
  <option>0
  <option>4
  <option selected>8
  <option>16
</select>

Instance Count: <select id="instanceCountSelect">
  <option>1
  <option>5
  <option selected>10
  <option>15
</select>
<br>
<span>Binding Density (%): </span>
<input id="bindingDensityInput" style="width: 200px" value="0, 1, 2, 4, 8, 16, 32, 64, 100"><br>

MDV: <input id="mdvCheckbox" type="checkbox" checked>
Handlebars: <input id="handlebarsCheckbox" type="checkbox" checked>

<button id="go">Run Benchmarks</button><br>

<span id="statusSpan"></span>

<section style="width: 100%">
  <article>
    <div style="display:inline-block; padding-bottom: 20px">
      Times in ms
    </div>
    <div style="display:inline-block">
      <canvas id="times" width="800" height="400"></canvas>
    </div>
    <div style="display:inline-block">
      <ul id="legendList">
      </ul>
    </div>
  </article>
</section>
<h3 style="margin-left: 440px">Binding Density</h3>

<div style="display:none">
  <div id="testDiv"></div>
</div>
<script>
var benchmark;
var goButton = document.getElementById('go');

var widthSelect = document.getElementById('widthSelect');
var depthSelect = document.getElementById('depthSelect');
var decorationSelect = document.getElementById('decorationSelect');
var instanceCountSelect = document.getElementById('instanceCountSelect');

var mdvCheckbox = document.getElementById('mdvCheckbox');
var handlebarsCheckbox = document.getElementById('handlebarsCheckbox');

var bindingDensityInput = document.getElementById('bindingDensityInput');

var statusSpan = document.getElementById('statusSpan');

var timesCanvas = document.getElementById('times');
var benchmarkSelect = document.getElementById('benchmarkSelect');
var configSelect = document.getElementById('configSelect');

var testDiv = document.getElementById('testDiv');

function changeBenchmark() {
  benchmark = window[benchmarkSelect.value];
  configSelect.innerHTML = '';
  benchmark.configs.forEach(function(config) {
    var option = document.createElement('option');
    option.innerHTML = config;
    configSelect.appendChild(option);
  });
}

var ul = document.getElementById('legendList');
var colors = [
  [100,149,237],
  [220,20,60],
].map(function(rgb) {
  return 'rgba(' + rgb.join(',') + ',.7)';
});

goButton.addEventListener('click', function() {
  goButton.disabled = true;
  goButton.innerHTML = 'Running...';
  ul.innerHTML = '';

  var bindingDensities = bindingDensityInput.value.split(',').map(function(val) {
    return Number(val) / 100;
  });

  var testTypes = [];
  if (mdvCheckbox.checked)
    testTypes.push('MDV');
  if (handlebarsCheckbox.checked)
    testTypes.push('Handlebars');

  testTypes.forEach(function(testType, i) {
    var li = document.createElement('li');
    li.innerHTML = testType;
    li.setAttribute('style', 'color: ' + colors[i]);
    ul.appendChild(li);
  });

  function benchmarkComplete(results) {
    if (Observer._allObserversCount > 2)
      alert('Error. All Observer Count: ' + Observer._allObserversCount);

    datasets = [];

    timesCanvas.setAttribute('height', '400');
    timesCanvas.setAttribute('width', '800');
    timesCanvas.setAttribute('style', '');

    var labels = bindingDensities.map(function(density) {
      return (density * 100) + '%';
    });

    var timesArray = [];
    for (var i = 0; i < results[0].length; i++) {
      timesArray.push(results.map(function(result) {
        return result[i];
      }));
    }

    var ctx = timesCanvas.getContext("2d");
    new Chart(ctx).Line({
      labels : labels,
      datasets : timesArray.map(function(times, i) {
        return {
          fillColor : 'rgba(255, 255, 255, 0)',
          strokeColor : colors[i],
          pointColor : colors[i],
          pointStrokeColor : "#fff",
          data : times
        };
      })
    }, {
      bezierCurve : false
    });

    goButton.disabled = false;
    goButton.innerHTML = 'Run Benchmarks';
    updateStatus();
  }

  function updateStatus(density, testType, runCount) {
    if (!testType) {
      statusSpan.innerHTML = '';
      return;
    }

    statusSpan.innerHTML = testType + ' ' + (100 * density) +
        '% binding density, ' + runCount + ' runs';
  }

  var width = Number(widthSelect.value);
  var depth = Number(depthSelect.value);
  var decoration = Number(decorationSelect.value);
  var instanceCount = Number(instanceCountSelect.value);

  var test = new MDVBenchmark(testDiv, width, depth, decoration, instanceCount);
  var runner = new BenchmarkRunner(test,
                                   bindingDensities,
                                   testTypes,
                                   benchmarkComplete,
                                   updateStatus);
  runner.go();
});
</script>
</body>
</html>